<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>组合式API</title>
  </head>
  <body>
    <div id="app">
      <button @click="num++">1</button>{{ num }}
      <my-root :num="num"></my-root>
    </div>
  </body>

  <script src="../lib/vue.global.js"></script>

  <template id="root">
    <div>{{ num }} -- {{ test }}</div>
  </template>

  <script>
    const { ref,onMounted, computed } = Vue;
    const Root = {
      props: ["num"],
      template: "#root",
      setup({ num }) {
        console.log(num);
        return {
          test: computed(() => num),
        };
      },
    };

    Vue.createApp({
      setup() {
        const num = ref(1000);
        return { num };
      },
      components: {
        MyRoot: Root,
      },
    }).mount("#app");
  </script>
</html>
